<template>
  <div class="searchSonInfo">
    <p class="close">
      <van-icon name="cross" size="20px" @click="Back" />
    </p>
    <div class="goods">
      <div v-for="item in imagesSrc" :key="item.id">
        <router-link to="/detailPage">
          <img v-lazy="getImageUrl(item.src, 'png')" alt="" />
        </router-link>
        <p class="goodsName">{{ item.name }}</p>
        <p class="goodsPrice">￥{{ item.price }}</p>
      </div>
    </div>
  </div>
  <input
    type="text"
    placeholder="写上你所爱的商品，我来帮您搜"
    class="searchSonIpt"
    v-model="Ipt"
  />
  <p class="bottomTip">
    <van-icon name="gem-o" size="18" />&nbsp;已经到最底下了~
  </p>
  <ZhiDing></ZhiDing>
</template>

<script setup>
import { getImageUrl } from "@/uilts/index";
import ZhiDing from "@/components/ZhiDing.vue";
import { useSearchStore } from "@/stores/search.js";
import { useRouter } from "vue-router";
import { ref } from "vue";
const Ipt = ref("");
const searchWords = useSearchStore();
if (searchWords.oldList[searchWords.oldList.length - 1] !== "") {
  searchWords.oldList.push("");
  Ipt.value = searchWords.oldList[searchWords.oldList.length - 1];
  if (searchWords.oldList[searchWords.oldList.length - 1] === "") {
    Ipt.value = searchWords.oldList[searchWords.oldList.length - 2];
  }
}
const router = useRouter();
function Back() {
  searchWords.oldList.forEach((item, index) => {
    if (item === "") {
      searchWords.oldList.splice(index, 1);
    }
  });
  router.back();
}
const imagesSrc = [
  {
    id: 1,
    name: "简易家居镜",
    price: 89.5,
    src: "goods3",
  },
  {
    id: 2,
    name: "简易家居镜",
    price: 89.5,
    src: "goods4",
  },
  {
    id: 3,
    name: "简易家居镜",
    price: 89.5,
    src: "goods5",
  },
  {
    id: 4,
    name: "简易家居镜",
    price: 89.5,
    src: "goods6",
  },
  {
    id: 5,
    name: "简易家居镜",
    price: 89.5,
    src: "goods3",
  },
  {
    id: 6,
    name: "简易家居镜",
    price: 89.5,
    src: "goods4",
  },
  {
    id: 7,
    name: "简易家居镜",
    price: 89.5,
    src: "goods5",
  },
  {
    id: 8,
    name: "简易家居镜",
    price: 89.5,
    src: "goods6",
  },
  {
    id: 9,
    name: "简易家居镜",
    price: 89.5,
    src: "goods3",
  },
  {
    id: 10,
    name: "简易家居镜",
    price: 89.5,
    src: "goods4",
  },
  {
    id: 11,
    name: "简易家居镜",
    price: 89.5,
    src: "goods5",
  },
  {
    id: 12,
    name: "简易家居镜",
    price: 89.5,
    src: "goods6",
  },
];
</script>

<style lang="less" scoped>
.searchSonInfo {
  margin: 0vw 3.667vw;
  overflow: hidden;
  position: relative;
  .close {
    margin-top: 4.667vw;
  }
}
.searchSonIpt {
  font-size: 1.6vw;
  position: absolute;
  background: transparent;
  margin-left: 2.333vw;
  top: 15.667vw;
  left: 0vw;
  width: 46.667vw;
  padding-bottom: 1.333vw;
  border-bottom: 0.067vw solid gray;
  animation: move6 linear 0.2s;
  animation-fill-mode: forwards;
}
@keyframes move6 {
  0% {
    position: absolute;
    top: 15.667vw;
    left: 8vw;
  }
  100% {
    position: absolute;
    top: 4.3vw;
    left: 12vw;
  }
}
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  div {
    width: 42vw;
    margin-top: 2.667vw;
    text-align: center;
    margin-top: 5.333vw;
    img {
      width: 42vw;
      height: 42vw;
      border-radius: 2.667vw;
    }
    p {
      font-size: 3.733vw;
      font-weight: bold;
    }
    .goodsName {
      margin-top: 4.667vw;
    }
  }
}
.bottomTip {
  height: 26.333vw;
  text-align: center;
  margin-top: 6.667vw;
}
</style>
